<template>
    <view>
        <nav-bar :titleCenter="false">
            <view class="search_view">
                <view class="search_box" v-if="inputState == 1000">
                    <input type="text" placeholder="搜索" focus v-model="keyWord" @input="searchInput" confirm-type="search"
                        @confirm="onSearch" />
                </view>
                <view v-else class="search_keyWord">
                    <text @click="onClearKeyWord">{{keyWord}}</text>
                    <view @click="inputState = 1000"></view>
                </view>
            </view>
            <view class="icon_setUp" slot="right" @click="onSearch">搜索</view>
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view v-if="searchState == 1000">
            <view class="history_search_box" v-if="historySearchList.length > 0">
                <view class="history_search_text">
                    <view>历史搜索</view><text @click="onClearHistory">清空</text>
                </view>
                <view class="history_search_content">
                    <view v-for="(item,index) of historySearchList" :key="index" @click="onHistory(item)">{{item}}</view>
                </view>
            </view>
            <view class="history_search_box">
                <view class="history_search_text">
                    <view>猜你喜欢</view>
                </view>
                <view class="history_search_content">
                    <view v-for="(item,index) of popularList" :key="index" @click="onHistory(item)">{{item}}</view>
                </view>
            </view>
        </view>
        <view v-show="searchState == 2000">
            <view class="search_type_box">
                <view :class="{active:searchType == 1000}" @click="onSearchType(1000)">商品搜索</view>
                <view :class="{active:searchType == 2000}" @click="onSearchType(2000)">店铺搜索</view>
            </view>
            <view class="search_interval"></view>
            <view v-if="searchType == 1000">
                <!-- 商品排序 -->
                <view class="goods_sort_box">
                    <view :class="{active:sortType == 3000}" @click="onSortType(3000)">智能排序</view>
                    <view :class="{active:sortType == 3002}" @click="onSortType(3002)">好评优先</view>
                    <view :class="{active:sortType == 3001}" @click="onSortType(3001)">低价优先</view>
                    <view :class="{active:sortType == 3003}" @click="onSortType(3003)">销量优先</view>
                </view>
                <view class="goods_sort_interval"></view>
            </view>
            <mescroll-body ref="mescrollRef" height="-186" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
                <view v-if="searchType == 1000" class="goods_box">
                    <waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
                </view>
                <view class="shop_box" v-else>
                    <view class="shop_item" v-for="(item,index) of storeInfoList" :key="index">
                        <image :src="item.logo" mode="aspectFill" @click="onPageJump('/pages/home/shop/shop?objId='+item.objId)"></image>
                        <view class="shop_info">
                            <view class="shop_name" @click="onPageJump('/pages/home/shop/shop?objId='+item.objId)">
                                <view>{{item.name}}</view>
                            </view>
                            <view class="other">
                                <text class="label" v-if="item.selfSupport">自营</text>
                                <!-- <text class="shop_collect">54.3万人收藏</text> -->
                            </view>
                            <view class="shop_goods_box">
                                <image v-for="(childItem,childIndex) of item.goods" :key="childIndex" @click="onPageJump('/pages/home/shop/goodsDetail?objId='+childItem.objId)"
                                    :src="childItem.img" mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
    </view>
</template>

<script>
    import waterfallGoods from '@/components/module/waterfall_goods';
    import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
    export default {
    	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        components: {
            waterfallGoods
        },
        data() {
            return {
                searchState: 1000,
                searchType: 1000,
                inputState: 1000,
                sortType: 3000,
                // 商品
                goodsDataList: [],
                // 商店
                storeInfoList: [],
                downOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                historySearchList: [],
                popularList: [],
                keyWord: ""
            };
        },
        //第一次加载
        onLoad(e) {
            let historySearchDtata = uni.getStorageSync("historySearchDtata");
            if (historySearchDtata) {
                this.historySearchList = historySearchDtata;
            }
            this.pageData();
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            pageData() {
                this.$http
                    .post('api/searh/v1/list', {
                        pageNo: 1,
                        pageSize: 15,
                        locatType: 1901,
                        areaId: 0
                    })
                    .then(res => {
                        this.popularList = res.data;
                    });
            },
            searchInput(e) {
                if (e.detail.value == "") {
                    this.searchState = 1000;
                    this.inputState = 1000;
                }
            },
            onClearKeyWord() {
                this.keyWord = "";
                this.searchState = 1000;
                this.inputState = 1000;
            },
            // 清除历史消息
            onClearHistory() {
                uni.removeStorageSync("historySearchDtata");
                this.historySearchList = [];
            },
            // 处理历史消息
            handleHistorySearch() {
                if (this.keyWord && !this.historySearchList.includes(this.keyWord)) {
                    this.historySearchList.unshift(this.keyWord);
                    let len = this.historySearchList.length;
                    if (len > 10) {
                        this.historySearchList.splice(10, len - 10);
                    }
                    uni.setStorageSync("historySearchDtata", this.historySearchList);
                }
            },
            // 点击搜索
            onSearch() {
                if (this.keyWord) {
                   this.mescroll.triggerDownScroll();
                   this.handleHistorySearch();
                }
            },
            // 点击历史消息
            onHistory(val) {
                this.keyWord = val;
                this.mescroll.triggerDownScroll();
                this.handleHistorySearch();
            },
            // 搜索类型切换
            onSearchType(val) {
                this.searchType = val;
                this.mescroll.triggerDownScroll();
            },
            // 排序选择
            onSortType(val) {
                this.sortType = val;
                this.mescroll.triggerDownScroll();
            },
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let url, httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    keyWord: this.keyWord
                };
                if (this.searchType == 1000) {
                    url = 'api/mall/goods/v1/list';
                    httpData.sortType = this.sortType;
                } else if (this.searchType == 2000) {
                    url = 'api/mall/shop/v1/list';
                }
                this.$http
                	.post(url, httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		this.searchState = 2000;
                		this.inputState = 2000;
                		if (this.searchType == 1000) {
                		    if (pageNo == 1) {
                		    	this.goodsDataList = res.data;
                		    } else {
                		    	this.goodsDataList = this.goodsDataList.concat(res.data);
                		    }
                		} else if (this.searchType == 2000) {
                            if (pageNo == 1) {
                            	this.storeInfoList = res.data;
                            } else {
                            	this.storeInfoList = this.storeInfoList.concat(res.data);
                            }
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    page {
        background: #FFFFFF;
    }

    .icon_setUp {
        font-size: 30rpx;
        margin-right: 30rpx;
    }

    .search_view {
        flex: 1;

        .search_keyWord {
            /* #ifdef MP */
            width: 360rpx;
            /* #endif */
            /* #ifndef MP */
            width: 520rpx;
            /* #endif */
            height: 64rpx;
            background: #f7f7f7;
            border-radius: 37rpx;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            flex-shrink: 0;

            text {
                height: 44rpx;
                background-color: $viceColor;
                border-radius: 22rpx;
                color: $themeColor;
                font-size: 24rpx;
                color: $themeColor;
                display: flex;
                align-items: center;
                padding: 0 20rpx;
                font-weight: normal;

                &:after {
                    content: "";
                    background-image: url('../../static/icon/theme/ic_search_clear.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 18rpx;
                    height: 18rpx;
                    margin-left: 12rpx;
                }
            }

            view {
                flex: 1;
                height: 64rpx;
            }
        }

        .search_box {
            /* #ifdef MP */
            width: 360rpx;
            /* #endif */
            /* #ifndef MP */
            width: 520rpx;
            /* #endif */
            height: 64rpx;
            background: #f7f7f7;
            border-radius: 37rpx;
            display: flex;
            align-items: center;
            padding: 0 20rpx 0 40rpx;

            &:before {
                content: "";
                background-image: url('../../static/icon/ic_search.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                width: 30rpx;
                height: 30rpx;
                margin-right: 20rpx;
            }

            input {
                font-size: 28rpx;
                height: 64rpx;
                font-weight: normal;
            }
        }
    }

    .history_search_box {
        padding: 40rpx 25rpx 15rpx 25rpx;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;

        .history_search_text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0rpx 15rpx;
            color: #333333;

            >view {
                font-size: 32rpx;
            }

            >text {
                font-size: 28rpx;
            }
        }

        .history_search_content {
            padding: 40rpx 0rpx 0 0;
            display: flex;
            flex-wrap: wrap;

            >view {
                padding: 18rpx 40rpx;
                background: #f7f7f7;
                border-radius: 30rpx;
                font-size: 24rpx;
                color: #333333;
                margin: 10rpx;
            }
        }
    }

    .goods_sort_interval {
        height: 100rpx;
    }

    .goods_sort_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 2;
        background-color: #FFF;

        >view {
            padding: 30rpx 40rpx;
            white-space: nowrap;
            color: #333333;
            opacity: 0.5;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                width: 2rpx;
                right: 0;
                height: 24rpx;
                transform: translateY(-50%);
                background: #cccccc;
            }

            &:last-child::before {
                content: inherit;
                width: 0;
            }
        }

        .active {
            opacity: 1;
        }
    }

    .search_interval {
        height: 88rpx;
    }

    .search_type_box {
        display: flex;
        justify-content: space-around;
        padding: 15rpx 0;
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 2;
        background-color: #FFF;

        view {
            width: 240rpx;
            height: 60rpx;
            border-radius: 30rpx;
            font-size: 28rpx;
            color: #333333;
            text-align: center;
            line-height: 60rpx;

            &.active {
                background-color: $themeColor;
                color: #FFF;
            }
        }
    }

    .goods_box {
        background-color: #f5f5f5;
        min-height: calc(100vh - 275rpx - var(--status-bar-height));
        padding-top: 20rpx;
    }

    .shop_box {
        padding: 0 30rpx;

        .shop_item {
            display: flex;
            align-items: flex-start;

            >image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                flex-shrink: 0;
                margin-right: 30rpx;
                margin-top: 30rpx;
            }

            .shop_info {
                width: calc(100% - 110rpx);
                padding: 30rpx 0;
                border-bottom: 2rpx solid #e5e5e5;

                .shop_name {
                    display: flex;
                    align-items: center;

                    view {
                        font-size: 32rpx;
                        color: #333333;
                        @include toe();
                        max-width: calc(100% - 50rpx);
                    }

                    &:after {
                        content: "";
                        width: 30rpx;
                        height: 30rpx;
                        margin-left: 20rpx;
                        @include bis("../../static/icon/theme/ic_shop_to.png");
                    }
                }

                .other {
                    display: flex;
                    align-items: center;
                    margin-top: 15rpx;

                    .label {
                        font-size: 24rpx;
                        color: #ffffff;
                        height: 30rpx;
                        border-radius: 15rpx;
                        @include theme("gradient_bg");
                        line-height: 30rpx;
                        padding: 0 15rpx;
                    }

                    .shop_collect {
                        font-size: 24rpx;
                        color: #999999;
                        margin-left: 20rpx;
                    }
                }

                .shop_goods_box {
                    margin-top: 30rpx;
                    display: flex;
                    flex-wrap: wrap;

                    image {
                        width: 186rpx;
                        height: 186rpx;
                        margin-right: 10rpx;
                        border-radius: 10rpx;

                        &:nth-child(3n) {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
</style>
